<template>
    <modal
        :show='show'
        mode='bottom'
        :maskClose='false'
        closeButton
        @close='closePassword'>
        <div class="component-pay-password">
            <input 
                type="tel" 
                class="component-pay-password__input" 
                v-model='password' 
                ref='passwordInput' 
                @keyup='inputFilter' 
                v-show='!complete && hadPassword'>
            <p class="component-pay-password__text">请输入交易密码</p>
            <template v-if='hadPassword'>
                <div class="component-pay-password__space">
                    <ul class="component-pay-password__frame" v-show='!complete'>
                        <li class="component-pay-password__item" v-for='n in 6' :class="{ 'active':password.length >= n }">
                            <i></i>
                        </li>
                    </ul>
                    <p class='component-pay-password__fail' v-show='!complete && status == "fail"'>密码输入错误，请重新输入</p>
                    <loading mode='absolute' v-show='complete && status != "success"'></loading>
                    <transition name='success'>
                        <div class="component-pay-password__success" v-show="status == 'success'"><i class='iconfont icon-tick-hollow'></i></div>
                    </transition>
                </div>
                <div class="component-pay-password__button">
                    <span class='button short pure--black' @click='goRouter("user-password-find-transaction")'>忘记密码</span>
                </div>
            </template>
            <template v-else>
                <p class='component-pay__set-password' @click='goSetPassword'>未设置交易密码<span>去设置</span></p>
            </template>
        </div>
    </modal>
</template>

<script>
    import { Promise } from 'es6-promise'
    import modal from './Modal.vue'
    import loading from './Loading.vue'
    import  { mapGetters, mapActions }  from 'vuex'
    import { userApi } from '../api/api'

    export default {
        components:{
            modal,
            loading
        },
        props: {
            show: {
                type: Boolean,
                required: true,
                default:false
            }
        },
        data() {
            return {
                hadPassword:false,
                password:'',
                complete:false,
                success:false,
                status:''
            }
        },
        computed:{
            ...mapGetters([
                'msgTip',
                'localInfo'
            ]),
            userInfo(){
                return this.localInfo.userInfo
            },

        },
        methods:{
            ...mapActions([
                'showLoading',
                'hideLoading',
                'setMsgTip'
            ]),
            goRouter(name){
                this.$router.push({
                    name:name
                })
            },
            goSetPassword(){

                if(_.isEmpty(this.userInfo.bankcard)){
                    this.setMsgTip({
                        text:'请先绑定银行卡',
                        type:'warn',
                    })
                    this.$router.push({
                        name:'user-bind-card-verified'
                    })
                    return false
                }
                this.$router.push({
                    name:'user-bind-card-transaction-password'
                })
            },
            closePassword(){
                this.$emit('close')
            },
            inputFocus(){

                $(this.$refs.passwordInput).focus()
                
            },
            inputFilter(event){
                let val = event.target.value
                if (!/^\d+$/.test(val)){ this.password = this.password.replace(/\D/g,'') }
                if(val.length == 6) {
                    this.checkPassword()
                    $(this.$refs.passwordInput).blur()
                    this.complete = true
                    this.password = ''
                }
                if (val.length > 6){ 
                    this.password = this.password.substring(0,6) 
                }
            },
            checkPassword(){
                let password = this.password
                userApi.checkTradePassword({
                    oldPassword:this.password
                })
                .then(result=>{
                    if(result.right){
                        this.status = 'success'
                        this.$emit('finish',password)
                        setTimeout(()=>{
                            this.status = ''
                            this.complete = false
                        },1000)
                    }
                    else{
                        this.status = 'fail'
                        this.complete = false
                    }
                })
                .catch(error=>{
                    console.error(error)
                    this.status = 'fail'
                    this.complete = false
                })
            }
        },
        created(){
            userApi.hadSetTradePassword()
            .then(result=>{
                if(result.hadSetTradePassword){
                    this.hadPassword = true
                }
                else{
                    this.hadPassword = false
                }
            })
            .catch(error=>{
                console.error(error)
                this.hadPassword = false
            })
        }
    }
</script>

<style lang="scss">
    @import "../sass/_variables";
    @import "../sass/_extends";
    @import "../sass/_mixins";

    .component-pay-password{

    }
    .component-pay-password__input{
        margin-left: -100%;
        width: 200%;
        position: absolute;
        top:55px;
        left:0;
        right:0;
        height:94px;
        opacity:0;
        z-index:2;
    }
    .component-pay-password__text{
        @extend %font-title;
        color:$importColor;
        text-align: center;
        padding-bottom: 24px;
    }
    .component-pay-password__space{
        position: relative;
        height: 94px;
        .loading--absolute{
            top:0;
        }
    }
    .component-pay-password__frame{
        display: flex;
        justify-content:center;
        position: absolute;
        top:0;
        left:0;
        right:0;
    }
    .component-pay-password__item{
        width: 40px;
        height: 40px;
        margin-right:8px;
        position: relative;
        background-color: $backgroundColor;
        border: 1px solid $sectionColor;
        box-sizing: border-box;
        i{
            display: none;
            width: 10px;
            height:10px;
            background-color: #000;
            border-radius:50%;
            position: absolute;
            top:50%;
            left:50%;
            margin-top:-5px;
            margin-left:-5px;
        }
        &:last-child{
            margin-right:0px;
        }
        &.active{
            background-color: #fff;
            i{
                display: block;
            }
        }
    }
    .component-pay-password__button{
        display: flex;
        justify-content: center;
    }
    .component-pay-password__success{
        text-align: center;
        position: absolute;
        top:0;
        left:50%;
        margin-left:-25px;
        .iconfont{
            font-size: 50px;
            color:$orange;
        }
    }
    .component-pay-password__fail{
        @extend %font-caption;
        color:$red;
        position: absolute;
        top:50px;
        width: 100%;
        text-align: center;
    }
    .component-pay__set-password{
        position: relative;
        @extend %font-title;
        padding:15px 0;
        text-align: center;
        span{
            color:$orange;
        }
    }

</style>
